<template>
    <div  class="header">
      <!-- {{editTitle}} -->
        <div v-if="isEdit">
        <a-input-group compact style="padding-top: 15px;">
            <a-input v-model:value="temporaryTitle" style="width: 200px" :maxlength="20" />
            <a-button type="text" @click="saveTitle">
                <template #icon>
                    <check-outlined />
                </template>
            </a-button>
            <a-button type="text" @click="cancelEdit">
                <template #icon>
                    <close-outlined />
                </template>
            </a-button>
        </a-input-group>
    </div>
    <div v-else style="display: flex;justify-content: center;">
        <div> {{ (editTitle || props.title).length > 15 ? (editTitle || props.title).slice(0, 15) + '...' : editTitle || props.title || '未命名对话'}}</div>
        <div v-if="!props.isFromShare" style="margin-left: 5px;cursor: pointer;" @click="editTitleClick">
            <edit-outlined />
        </div>

    </div>
    <slot></slot>
    </div>

</template>
<script lang="ts" setup>
import { EditOutlined, CheckOutlined, CloseOutlined} from '@ant-design/icons-vue';
import { ref,onMounted } from 'vue';
import {  saveOrUpdate } from '@/api/dialog'
import {  message } from 'ant-design-vue'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useChatBus } from '@/hook/useChatBus'

const editTitle = ref('');
const temporaryTitle = ref('');
const isEdit = ref(false);
const userInfo = useUserInfoStore()
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    dialogId: {
        type: String,
        default: ''
    },
    isFromShare: {
        type: Boolean,
        default: false
    },
})

const bus = useChatBus((e) => {
  switch (e) {
    case 'refreshDiaglogName':
      break
    default:
      ''
  }
})
onMounted(()=>{
  editTitle.value = props.title
  console.log('editTitle',editTitle.value)
})
function saveTitle() {
  if (!temporaryTitle.value.length) {
    message.error('会话名称不能为空')
    return
  }
  if (temporaryTitle.value.length >20) {
    message.error('会话名称不超过20个字符')
    return
  }

  saveOrUpdate({
    id: props.dialogId,
    userId: userInfo.id as string,
    dialogName: temporaryTitle.value
  }).then((res) => {
    if (!res.data.ok) return
    editTitle.value = temporaryTitle.value
    isEdit.value = false
    message.success('会话名称修改成功')
    bus.emit('refreshDiaglogName')
  })
}
const cancelEdit =()=>{
  isEdit.value = false
  temporaryTitle.value  = ''
}
const editTitleClick = () => {
  if (props.isFromShare) return
  isEdit.value = true
  temporaryTitle.value = editTitle.value || props.title || '未命名对话'
}
</script>
<style lang="scss" scoped>
 .header {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 16px;
    color: #0D1C2E;
    // border-bottom: 1px solid #E0E0E0;
    // margin-bottom: 8px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      left: 24px;
      top: auto;
      bottom: 0;
      right: auto;
      height: 1px;
      width: calc(100% - 48px);
      background-color: #dadbdd;
    }

    .chatCreatedTime {
      position: absolute;
      right: 24px;
      bottom: -16px;
      color: #5C5E61;
      font-size: 14px;
    }
  }</style>